<template>
  <div class="forms">
    <el-button type="primary" class="addButton" @click="addButton"
      >添加</el-button
    >
    <el-dialog title="提示" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="活动期限">
          <el-date-picker
            v-model="activeTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="cate">
          <el-form-item label="一级分类">
            <el-select
              v-model="ruleForm.first_cateid"
              placeholder="请选择"
              @change="firstChange(ruleForm.first_cateid)"
            >
              <el-option
                :label="item.catename"
                :value="item.id"
                v-for="item in cateListData"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类">
            <el-select
              v-model="ruleForm.second_cateid"
              placeholder="请选择"
              @change="secondChange(ruleForm.second_cateid)"
            >
              <el-option
                :label="item.catename"
                :value="item.id"
                v-for="item in firstListData"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品">
            <el-select v-model="ruleForm.goodsid" placeholder="请选择">
              <el-option
                :label="item.goodsname"
                :value="item.id"
                v-for="item in goodsList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch
              :active-value="1"
              :inactive-value="2"
              inactive-color="#ff4949"
              v-model="ruleForm.status"
            >
            </el-switch>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addSeckill" v-if="sid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editSeckill" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSeckAdd,
  getCateList,
  getGoodsList,
  getSeckInfo,
  getSeckEdit
} from "../../../request/api";

export default {
  props: ["dialog"],
  data() {
    return {
      sid: "",
      title: "",
      ruleForm: {
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态   1正常2禁用
      },
      // 活动期限
      activeTime: "",
      // 商品分类列表数据
      cateListData: [],
      // 一级分类列表数据
      firstListData: [],
      // 商品数据列表
      goodsListData: [],
      // 商品
      goodsList: [],
    };
  },
  methods: {
    resetFiled(){
      this.ruleForm={
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态   1正常2禁用
      }
    },

    // 点击添加
    addButton() {
      this.resetFiled()
      this.title = "添加秒杀";
      this.sid = "";
      this.dialog.isShowDialog = true;
    },
    // 获取商品分类列表数据
    getCateListData() {
      getCateList().then(
        (res) => {
          if (res.data.code == 200) {
            this.cateListData = res.data.list;
          }
        },
        (err) => err
      );
    },
    // 一级分类改变时触发
    firstChange(first_cateid) {
      this.ruleForm.second_cateid = "";
      this.ruleForm.goodsid = "";
      let arr = this.cateListData.filter((item) => item.id == first_cateid);
      this.firstListData = arr[0].children;
    },
    // 二级分类改变时触发
    secondChange(second_cateid) {
      this.ruleForm.goodsid = "";
      let arr = this.goodsListData.filter(
        (item) => item.second_cateid == second_cateid
      );
      this.goodsList = arr;
    },
    // 获取商品数据列表
    getGoodsListData() {
      getGoodsList().then(
        (res) => {
          if (res.data.code == 200) {
            this.goodsListData = res.data.list;
          }
        },
        (err) => err
      );
    },
    // 添加秒杀
    addSeckill() {
      this.ruleForm.begintime = this.activeTime[0]
        ? this.activeTime[0].getTime()
        : [];
      this.ruleForm.endtime = this.activeTime[1]
        ? this.activeTime[1].getTime()
        : [];
      getSeckAdd(this.ruleForm).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.isShowDialog = false;
            // 刷新列表
            this.$emit("refreshList");
          }
        },
        (err) => err
      );
    },
    // 获取一个秒杀信息
    getOneSeckillData(id) {
      this.sid = id;
      getSeckInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            this.dialog.isShowDialog = true;
          }
        },
        (err) => err
      );
    },
    // 编辑秒杀
    editSeckill() {
      this.ruleForm.begintime = this.activeTime[0]
        ? this.activeTime[0].getTime()
        : [];
      this.ruleForm.endtime = this.activeTime[1]
        ? this.activeTime[1].getTime()
        : [];
      let obj = {
        id: this.sid,
        ...this.ruleForm,
      };
      getSeckEdit(obj).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            this.dialog.isShowDialog = false;
            // 刷新列表
            this.$emit("refreshList");
          }
        },
        (err) => err
      );
    },
  },
  mounted() {
    this.getCateListData();
    this.getGoodsListData();
  },
};
</script>

<style scoped>
.addButton {
  margin-bottom: 20px;
}
</style>

